<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./练习2样式.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="./修罗.webp"></li>
            <li><img src="./刑天.webp"></li>
            <li><img src="./战神刑天.jpg"></li>
            <li><img src="./金刚.webp"></li>
            <li><img src="./飞影.webp"></li>
            <li><img src="./吴亦凡.webp"></li>
        </ul>
        <span class="iconfont icon-lujing lbut"></span>
        <span class="iconfont icon-a-11 rbut"></span>
        <ol>
            <li index="0" style="background-color: red;"></li>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
            <li index="4"></li>
            <li index="5"></li>
        </ol>
    </div>
</body>

</html>
<script>
    var imgs = document.querySelectorAll('.box ul  img')
    var lbut = document.querySelector('.lbut')
    var rbut = document.querySelector('.rbut')
    var ul = document.querySelector('ul')
    var box = document.querySelector('.box')
    var lis = document.querySelectorAll('ol li')
    var num = 0
    var time
    rbut.onclick = function () {
        num++
        if (num > imgs.length - 1) {
            num = 0
        }
        ul.style.left = -num * 600 + 'px'
        change(num)
    }
    lbut.onclick = function () {
        num--
        if (num < 0) {
            num = imgs.length - 1
        }
        ul.style.left = -num * 600 + 'px'
        change(num)
    }
    box.onmouseenter = function () {
        lbut.style.display = 'block'
        rbut.style.display = 'block'
        clearInterval(time)
    }
    box.onmouseleave = function () {
        lbut.style.display = 'none'
        rbut.style.display = 'none'
        startLunbo()
    }
    function startLunbo() {
        time = setInterval(function () {
            rbut.onclick()
        }, 1000)
    }
    startLunbo()
    for (i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            var index = this.getAttribute('index')
            num = index
            ul.style.left = -num * 600 + 'px'
            change(num)
        }
    }
    function change(index) {
        for (i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = 'white'
        }
        lis[index].style.backgroundColor = 'red'
    }
</script>